<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>定时任务管理系统</title>
	<!-- Bootstrap -->
	<script src="/js//jquery/jquery-1.11.1.min.js"></script>
	<script src="/js/bootstrap-3.3.7/js/bootstrap.min.js"></script>
	<script src="/js/layui-v2.2.5/layui/layui.js"></script>
	<script type="text/javascript" src="/js/jquery/jquery-timer-1.0.js"></script>
	<link href="/js/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link href="/js/layui-v2.2.5/layui/css/layui.css" rel="stylesheet">
	<style type="text/css">
		body { padding-top: 70px; }
	</style>
</head>
<body>
	<#include "/head.ftl" />
	<div class="container-fluid" >
		<div class="page-header " >
			<h2>
				定时任务管理
			</h2>
			<hr/>
			<!-- 按钮区 -->
			<div id="buttons">
				<div class="btn-group" role="group" aria-label="...">
					<button type="button" class="btn btn-primary btn-sm" id="addBtn">
						 <span class="glyphicon glyphicon-plus" aria-hidden="true">添加任务</span> 
					 </button>
					<button type="button" class="btn btn-success btn-sm">未定义按钮</button>
					<button type="button" class="btn btn-info btn-sm">未定义按钮</button>
					<button type="button" class="btn btn-warning btn-sm">未定义按钮</button>
					<button type="button" class="btn btn-danger btn-sm">未定义按钮</button>
				</div>
			</div>
			<br/>
			<!-- 表格区 -->
			<div >
				<table class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th>#</th>
							<th>任务名称</th>
							<th>class</th>
							<th>任务描述</th>
							<th>cron</th>
							<th>任务状态</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
					<#list listData as job>
						<tr class="change">
							<th scope="row">${job_index + 1}</th>
							<td>${job.taskName}</td>
							<td>${job.taskClassName}</td>
							<td>${job.description}</td>
							<td>${job.cron}</td>
							<!-- 状态列 -->
							<#if job.status==0>
								<td style="color: blue;">${taskStatusMap['${job.status}']}</td>
							<#else>
								<td style="color: red;">${taskStatusMap['${job.status}']}</td>
							</#if>
							<!-- 操作列 -->
							<td>
								<#if job.status==0>
									<button type="button" onclick="updateTaskStatus(1,${job.id})" 
											class="btn btn-warning btn-sm">停止任务</button>
								<#else>
									<button type="button" onclick="updateTaskStatus(0,${job.id})"
											class="btn btn-info btn-sm">启用任务</button>
								</#if>
								<button type="button"  onclick="deleteTask(${job.id})"
										class="btn btn-danger btn-sm">删除任务</button> 
								<button type="button"  onclick="toUpdate(${job.id})"
										class="btn btn-success btn-sm">编辑任务</button> 
							</td>
						</tr>
						</#list>	
					</tbody>
				</table>
			</div>
			<!-- 表格区 end  -->
		</div>
	</div>

	<!-- 弹出模态窗口-->
	<div class="modal fade" style="top: 13%;" tabindex="-1" role="dialog"
		id="showModal">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<!-- 内容会加载到这里 -->
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
	
	<script type="text/javascript">
		$(function() {
			// 添加任务按钮绑定点击事件
			$("#addBtn").click(function() {
				// 打开模态框
				$("#showModal").modal({
					backdrop : 'static', // 点击空白不关闭
					keyboard : false, // 按键盘esc也不会关闭
					remote : '/task/toAddTask' // 从远程加载内容的地址
				});
			});

			// 每次隐藏时，清除数据，确保不会和主页dom元素冲突。确保点击时，重新加载。
			$("#showModal").on("hidden.bs.modal", function() {
				// 这个#showModal是模态框的id
				$(this).removeData("bs.modal");
				$(this).find(".modal-content").children().remove();
			});
		}) // end window onload
		
		/** 跳转到编辑页面 */
		function toUpdate(id) {
			// 打开模态框
			$("#showModal").modal({
				backdrop : 'static', // 点击空白不关闭
				keyboard : false, // 按键盘esc也不会关闭
				remote : '/task/toUpdate?id=' + id // 从远程加载内容的地址
			});
		}
		
		/** 修改状态  */
		function updateTaskStatus(status, id) {
			var tip = (status == 0) ? "启用" : "停止"
			layer.confirm('确定要' + tip +'吗?', {icon: 3, title:'确认信息',skin: 'layui-layer-lan'}, 
					function(index){
					 	 layer.close(index);	// 这个是点完这个按钮后,需要把这个确认框关闭
					 	 var loadIndex = layer.load(0); //加载层
					 	 $.ajax({
					 	 	type:'POST',
					 	 	url:'/task/updateStatus',
					 	 	data:{"id":id , "status": status},	// 这个不是json字符串,是json对象;所以后台和处理表单是一样的
					 	 	success:function(data){
					 	 		layer.close(loadIndex);
					 	 		if(data.status){
									layer.msg(tip + "成功");
									// 调用方法刷新
									reloadPage()
								} else {
									layer.msg(tip + "失败");
								}
					 	 	},
					 	 	error:function(){
					 	 		layer.close(loadIndex);
					 	 		layer.msg(tip + "失败");
					 	 	},
					 	 	dataType:'json'
					 	 });
					}
				);
		}
		
		/** 删除任务 */
		function deleteTask(id) {
			layer.confirm('确定要删除吗?', {icon: 3, title:'确认信息',skin: 'layui-layer-lan'}, 
					function(index){
					 	 layer.close(index);	// 这个是点完这个按钮后,需要把这个确认框关闭
					 	 var loadIndex = layer.load(0); //加载层
					 	 $.ajax({
					 	 	type:'POST',
					 	 	url:'/task/delete',
					 	 	data:{"id":id },	// 这个不是json字符串,是json对象;所以后台和处理表单是一样的
					 	 	success:function(data){
					 	 		layer.close(loadIndex);
					 	 		if(data.status){
									layer.msg("删除成功");
									// 调用方法刷新
									reloadPage()
								} else {
									layer.msg("删除失败");
								}
					 	 	},
					 	 	error:function(){
					 	 		layer.close(loadIndex);
					 	 		layer.msg("删除失败");
					 	 	},
					 	 	dataType:'json'
					 	 });
					}
				);
		}
		
		/** 延迟0.5秒重新加载页面 */
		function reloadPage() {
			setTimeout(function(){
				window.location.reload();
			},500);
		}
	</script>

</body>
</html>